<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>客户档案管理 - CRM旅游管理系统</title>
    <link rel="stylesheet" href="../../../shared/styles/apple-design.css">
    <link rel="stylesheet" href="../styles/customer-management.css">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <nav class="top-navbar">
        <div class="nav-container">
            <div class="nav-left">
                <div class="nav-brand">
                    <i class="fas fa-map-marked-alt"></i>
                    <span>CRM旅游系统</span>
                </div>
                <div class="nav-breadcrumb">
                    <span class="breadcrumb-item">客户管理</span>
                    <i class="fas fa-chevron-right"></i>
                    <span class="breadcrumb-item active">客户档案</span>
                </div>
            </div>
            <div class="nav-right">
                <button class="nav-button" id="notifications-btn">
                    <i class="fas fa-bell"></i>
                    <span class="notification-badge">3</span>
                </button>
                <div class="user-menu">
                    <img src="https://via.placeholder.com/32x32/007AFF/FFFFFF?text=管" alt="用户头像" class="user-avatar">
                    <span class="user-name">管理员</span>
                    <i class="fas fa-chevron-down"></i>
                </div>
            </div>
        </div>
    </nav>

    <!-- 侧边栏 -->
    <aside class="sidebar">
        <div class="sidebar-content">
            <div class="sidebar-section">
                <h3 class="sidebar-title">客户管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item active">
                        <a href="#" class="menu-link">
                            <i class="fas fa-users"></i>
                            <span>客户档案</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-user-plus"></i>
                            <span>新增客户</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-tags"></i>
                            <span>标签管理</span>
                        </a>
                    </li>
                </ul>
            </div>
            
            <div class="sidebar-section">
                <h3 class="sidebar-title">业务管理</h3>
                <ul class="sidebar-menu">
                    <li class="menu-item">
                        <a href="invitation-management.html" class="menu-link">
                            <i class="fas fa-calendar-check"></i>
                            <span>邀约活动</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-chart-line"></i>
                            <span>销售机会</span>
                        </a>
                    </li>
                    <li class="menu-item">
                        <a href="#" class="menu-link">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>线路产品</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </aside>

    <!-- 主内容区 -->
    <main class="main-content">
        <!-- 页面头部 -->
        <header class="page-header">
            <div class="header-left">
                <h1 class="page-title">客户档案管理</h1>
                <p class="page-subtitle">管理中老年旅游客户的完整档案信息</p>
            </div>
            <div class="header-right">
                <button class="btn btn-secondary" id="import-btn">
                    <i class="fas fa-upload"></i>
                    导入客户
                </button>
                <button class="btn btn-primary" id="add-customer-btn">
                    <i class="fas fa-plus"></i>
                    新增客户
                </button>
            </div>
        </header>

        <!-- 搜索和筛选区域 -->
        <section class="search-filter-section">
            <div class="search-filter-container">
                <!-- 搜索框 -->
                <div class="search-box">
                    <i class="fas fa-search search-icon"></i>
                    <input type="text" placeholder="搜索客户姓名、手机号或客户编号" class="search-input" id="search-input">
                    <button class="search-clear" id="search-clear">
                        <i class="fas fa-times"></i>
                    </button>
                </div>

                <!-- 筛选器 -->
                <div class="filter-controls">
                    <div class="filter-group">
                        <label class="filter-label">客户状态</label>
                        <select class="filter-select" id="status-filter">
                            <option value="">全部状态</option>
                            <option value="有效客户">有效客户</option>
                            <option value="潜在客户">潜在客户</option>
                            <option value="已成交客户">已成交客户</option>
                            <option value="无效客户">无效客户</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">年龄范围</label>
                        <select class="filter-select" id="age-filter">
                            <option value="">全部年龄</option>
                            <option value="50-60">50-60岁</option>
                            <option value="60-70">60-70岁</option>
                            <option value="70-80">70-80岁</option>
                            <option value="80+">80岁以上</option>
                        </select>
                    </div>

                    <div class="filter-group">
                        <label class="filter-label">健康状况</label>
                        <select class="filter-select" id="health-filter">
                            <option value="">全部状况</option>
                            <option value="健康良好">健康良好</option>
                            <option value="健康一般">健康一般</option>
                            <option value="健康较差">健康较差</option>
                        </select>
                    </div>

                    <button class="btn btn-outline" id="reset-filters">
                        <i class="fas fa-undo"></i>
                        重置
                    </button>
                </div>
            </div>
        </section>

        <!-- 统计卡片 -->
        <section class="stats-section">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-icon stat-primary">
                        <i class="fas fa-users"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">1,248</div>
                        <div class="stat-label">总客户数</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +12%
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-success">
                        <i class="fas fa-user-check"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">856</div>
                        <div class="stat-label">有效客户</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +8%
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-warning">
                        <i class="fas fa-user-clock"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">324</div>
                        <div class="stat-label">潜在客户</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +15%
                        </div>
                    </div>
                </div>

                <div class="stat-card">
                    <div class="stat-icon stat-info">
                        <i class="fas fa-handshake"></i>
                    </div>
                    <div class="stat-content">
                        <div class="stat-number">468</div>
                        <div class="stat-label">已成交客户</div>
                        <div class="stat-change positive">
                            <i class="fas fa-arrow-up"></i>
                            +6%
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 客户列表 -->
        <section class="table-section">
            <div class="table-header">
                <div class="table-title">
                    <h2>客户列表</h2>
                    <span class="result-count">共 1,248 条记录</span>
                </div>
                <div class="table-actions">
                    <button class="btn btn-outline" id="export-btn">
                        <i class="fas fa-download"></i>
                        导出
                    </button>
                    <div class="view-toggle">
                        <button class="view-btn active" data-view="table">
                            <i class="fas fa-list"></i>
                        </button>
                        <button class="view-btn" data-view="grid">
                            <i class="fas fa-th"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 表格视图 -->
            <div class="table-container" id="table-view">
                <table class="customer-table">
                    <thead>
                        <tr>
                            <th class="sortable" data-sort="customer_number">
                                客户编号
                                <i class="fas fa-sort"></i>
                            </th>
                            <th class="sortable" data-sort="name">
                                客户姓名
                                <i class="fas fa-sort"></i>
                            </th>
                            <th>性别</th>
                            <th class="sortable" data-sort="age">
                                年龄
                                <i class="fas fa-sort"></i>
                            </th>
                            <th>联系电话</th>
                            <th>客户状态</th>
                            <th>健康状况</th>
                            <th>标签</th>
                            <th class="sortable" data-sort="created_at">
                                创建时间
                                <i class="fas fa-sort"></i>
                            </th>
                            <th class="actions-column">操作</th>
                        </tr>
                    </thead>
                    <tbody id="customer-table-body">
                        <!-- 客户数据行 -->
                        <tr class="customer-row" data-customer-id="1">
                            <td class="customer-number">CRM2025000001</td>
                            <td class="customer-name">
                                <div class="customer-info">
                                    <div class="customer-avatar">张</div>
                                    <div class="customer-details">
                                        <div class="name">张大爷</div>
                                        <div class="phone">138****8001</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="gender-badge male">男</span>
                            </td>
                            <td>68</td>
                            <td>138****8001</td>
                            <td>
                                <span class="status-badge status-active">有效客户</span>
                            </td>
                            <td>
                                <span class="health-badge health-good">健康良好</span>
                            </td>
                            <td>
                                <div class="tag-list">
                                    <span class="tag tag-vip">VIP客户</span>
                                    <span class="tag tag-health">身体健康</span>
                                </div>
                            </td>
                            <td>2025-01-15</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewCustomer(1)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑" onclick="editCustomer(1)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showMoreActions(1)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="customer-row" data-customer-id="2">
                            <td class="customer-number">CRM2025000002</td>
                            <td class="customer-name">
                                <div class="customer-info">
                                    <div class="customer-avatar">李</div>
                                    <div class="customer-details">
                                        <div class="name">李大妈</div>
                                        <div class="phone">139****8002</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="gender-badge female">女</span>
                            </td>
                            <td>65</td>
                            <td>139****8002</td>
                            <td>
                                <span class="status-badge status-potential">潜在客户</span>
                            </td>
                            <td>
                                <span class="health-badge health-normal">健康一般</span>
                            </td>
                            <td>
                                <div class="tag-list">
                                    <span class="tag tag-quality">优质客户</span>
                                    <span class="tag tag-careful">需要关怀</span>
                                </div>
                            </td>
                            <td>2025-01-14</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewCustomer(2)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑" onclick="editCustomer(2)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showMoreActions(2)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>

                        <tr class="customer-row" data-customer-id="3">
                            <td class="customer-number">CRM2025000003</td>
                            <td class="customer-name">
                                <div class="customer-info">
                                    <div class="customer-avatar">王</div>
                                    <div class="customer-details">
                                        <div class="name">王先生</div>
                                        <div class="phone">137****8003</div>
                                    </div>
                                </div>
                            </td>
                            <td>
                                <span class="gender-badge male">男</span>
                            </td>
                            <td>72</td>
                            <td>137****8003</td>
                            <td>
                                <span class="status-badge status-deal">已成交客户</span>
                            </td>
                            <td>
                                <span class="health-badge health-poor">健康较差</span>
                            </td>
                            <td>
                                <div class="tag-list">
                                    <span class="tag tag-normal">普通客户</span>
                                    <span class="tag tag-care">需要照顾</span>
                                </div>
                            </td>
                            <td>2025-01-13</td>
                            <td class="actions">
                                <div class="action-buttons">
                                    <button class="action-btn" title="查看详情" onclick="viewCustomer(3)">
                                        <i class="fas fa-eye"></i>
                                    </button>
                                    <button class="action-btn" title="编辑" onclick="editCustomer(3)">
                                        <i class="fas fa-edit"></i>
                                    </button>
                                    <button class="action-btn" title="更多操作" onclick="showMoreActions(3)">
                                        <i class="fas fa-ellipsis-h"></i>
                                    </button>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <!-- 卡片视图 -->
            <div class="grid-container" id="grid-view" style="display: none;">
                <div class="customer-grid" id="customer-grid-body">
                    <!-- 客户卡片 -->
                    <div class="customer-card" data-customer-id="1" onclick="viewCustomer(1)">
                        <div class="card-header">
                            <div class="customer-avatar large">张</div>
                            <div class="customer-basic">
                                <div class="customer-name">张大爷</div>
                                <div class="customer-number">CRM2025000001</div>
                            </div>
                            <div class="card-actions">
                                <button class="card-action-btn" title="编辑" onclick="editCustomer(1, event)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="card-action-btn" title="更多" onclick="showMoreActions(1, event)">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="card-content">
                                <div class="customer-info-section">
                                    <div class="customer-meta">
                                        <div class="meta-item">
                                            <i class="fas fa-birthday-cake"></i>
                                            <span>68岁</span>
                                        </div>
                                        <div class="meta-item">
                                            <i class="fas fa-phone"></i>
                                            <span>138****8001</span>
                                        </div>
                                        <div class="meta-item">
                                            <i class="fas fa-calendar"></i>
                                            <span>2025-01-15</span>
                                        </div>
                                    </div>

                                    <div class="customer-status">
                                        <span class="status-badge status-active">有效客户</span>
                                        <span class="health-badge health-good">健康良好</span>
                                    </div>

                                    <div class="customer-tags">
                                        <span class="tag tag-vip">VIP客户</span>
                                        <span class="tag tag-health">身体健康</span>
                                    </div>
                                </div>
                                
                                <div class="customer-photo-section">
                                    <div class="customer-photo">
                                        <img src="https://via.placeholder.com/80x80/E5E5EA/8E8E93?text=张" alt="张大爷" class="photo-img">
                                        <div class="photo-placeholder">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button class="card-footer-btn primary" onclick="callCustomer(1, event)">
                                <i class="fas fa-phone"></i>
                                <span>拨打电话</span>
                            </button>
                            <button class="card-footer-btn secondary" onclick="sendMessage(1, event)">
                                <i class="fas fa-comment"></i>
                                <span>发送短信</span>
                            </button>
                        </div>
                    </div>

                    <div class="customer-card" data-customer-id="2" onclick="viewCustomer(2)">
                        <div class="card-header">
                            <div class="customer-avatar large">李</div>
                            <div class="customer-basic">
                                <div class="customer-name">李大妈</div>
                                <div class="customer-number">CRM2025000002</div>
                            </div>
                            <div class="card-actions">
                                <button class="card-action-btn" title="编辑" onclick="editCustomer(2, event)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="card-action-btn" title="更多" onclick="showMoreActions(2, event)">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="card-content">
                                <div class="customer-info-section">
                                    <div class="customer-meta">
                                        <div class="meta-item">
                                            <i class="fas fa-birthday-cake"></i>
                                            <span>65岁</span>
                                        </div>
                                        <div class="meta-item">
                                            <i class="fas fa-phone"></i>
                                            <span>139****8002</span>
                                        </div>
                                        <div class="meta-item">
                                            <i class="fas fa-calendar"></i>
                                            <span>2025-01-14</span>
                                        </div>
                                    </div>

                                    <div class="customer-status">
                                        <span class="status-badge status-potential">潜在客户</span>
                                        <span class="health-badge health-normal">健康一般</span>
                                    </div>

                                    <div class="customer-tags">
                                        <span class="tag tag-quality">优质客户</span>
                                        <span class="tag tag-careful">需要关怀</span>
                                    </div>
                                </div>
                                
                                <div class="customer-photo-section">
                                    <div class="customer-photo">
                                        <img src="https://via.placeholder.com/80x80/FFE4E1/CD5C5C?text=李" alt="李大妈" class="photo-img">
                                        <div class="photo-placeholder">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button class="card-footer-btn primary" onclick="callCustomer(2, event)">
                                <i class="fas fa-phone"></i>
                                <span>拨打电话</span>
                            </button>
                            <button class="card-footer-btn secondary" onclick="sendMessage(2, event)">
                                <i class="fas fa-comment"></i>
                                <span>发送短信</span>
                            </button>
                        </div>
                    </div>

                    <div class="customer-card" data-customer-id="3" onclick="viewCustomer(3)">
                        <div class="card-header">
                            <div class="customer-avatar large">王</div>
                            <div class="customer-basic">
                                <div class="customer-name">王先生</div>
                                <div class="customer-number">CRM2025000003</div>
                            </div>
                            <div class="card-actions">
                                <button class="card-action-btn" title="编辑" onclick="editCustomer(3, event)">
                                    <i class="fas fa-edit"></i>
                                </button>
                                <button class="card-action-btn" title="更多" onclick="showMoreActions(3, event)">
                                    <i class="fas fa-ellipsis-h"></i>
                                </button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="card-content">
                                <div class="customer-info-section">
                                    <div class="customer-meta">
                                        <div class="meta-item">
                                            <i class="fas fa-birthday-cake"></i>
                                            <span>72岁</span>
                                        </div>
                                        <div class="meta-item">
                                            <i class="fas fa-phone"></i>
                                            <span>137****8003</span>
                                        </div>
                                        <div class="meta-item">
                                            <i class="fas fa-calendar"></i>
                                            <span>2025-01-13</span>
                                        </div>
                                    </div>

                                    <div class="customer-status">
                                        <span class="status-badge status-deal">已成交客户</span>
                                        <span class="health-badge health-poor">健康较差</span>
                                    </div>

                                    <div class="customer-tags">
                                        <span class="tag tag-normal">普通客户</span>
                                        <span class="tag tag-care">需要照顾</span>
                                    </div>
                                </div>
                                
                                <div class="customer-photo-section">
                                    <div class="customer-photo">
                                        <img src="https://via.placeholder.com/80x80/E0F2F1/26A69A?text=王" alt="王先生" class="photo-img">
                                        <div class="photo-placeholder">
                                            <i class="fas fa-user"></i>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="card-footer">
                            <button class="card-footer-btn primary" onclick="callCustomer(3, event)">
                                <i class="fas fa-phone"></i>
                                <span>拨打电话</span>
                            </button>
                            <button class="card-footer-btn secondary" onclick="sendMessage(3, event)">
                                <i class="fas fa-comment"></i>
                                <span>发送短信</span>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 分页 -->
            <div class="pagination-container">
                <div class="pagination-info">
                    显示第 1-20 条，共 1,248 条记录
                </div>
                <div class="pagination">
                    <button class="page-btn" disabled>
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="page-btn active">1</button>
                    <button class="page-btn">2</button>
                    <button class="page-btn">3</button>
                    <span class="page-dots">...</span>
                    <button class="page-btn">63</button>
                    <button class="page-btn">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                </div>
                <div class="page-size-selector">
                    <label>每页显示</label>
                    <select id="page-size">
                        <option value="20">20</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                    </select>
                    <label>条</label>
                </div>
            </div>
        </section>
    </main>

    <!-- 模态框：操作菜单 -->
    <div class="modal-overlay" id="action-menu-modal">
        <div class="action-menu">
            <button class="action-menu-item" onclick="callCustomer()">
                <i class="fas fa-phone"></i>
                <span>拨打电话</span>
            </button>
            <button class="action-menu-item" onclick="sendMessage()">
                <i class="fas fa-comment"></i>
                <span>发送短信</span>
            </button>
            <button class="action-menu-item" onclick="addNote()">
                <i class="fas fa-sticky-note"></i>
                <span>添加备注</span>
            </button>
            <button class="action-menu-item" onclick="viewHistory()">
                <i class="fas fa-history"></i>
                <span>查看历史</span>
            </button>
            <button class="action-menu-item danger" onclick="deleteCustomer()">
                <i class="fas fa-trash"></i>
                <span>删除客户</span>
            </button>
            <button class="action-menu-item cancel" onclick="closeActionMenu()">
                <i class="fas fa-times"></i>
                <span>取消</span>
            </button>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="../scripts/customer-management.js"></script>
</body>
</html>